<html>
  <head>
    <title>
    Sample Test Page
    </title>
<style>
header
{

!left: 310px;
position: fixed;
width: 100%;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
header nav {
width:auto;
background: url(tb-sprite-bg.png) repeat-x 0px -195px;
display:block;
}
#sec-nav
{

position:fixed
width: -100%;
left:-400px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
header nav ul
{
height: 44px;
margin: 0px;
	padding: 0px;
background: url(tb-sprite-bg.png) repeat-x 0px -195px;
}
	header nav ul li {
		float: left; list-style: none; width: 33.3%; 
text-align:center;
font-weight: bold;
	}
header nav ul li a
{
text-decoration:none;
	color: #606060;
display: block;
padding: 10px 0px 15px 0px;
}
#main
{
!margin: 8px;
}
</style>

<script>
var t=0;
function sd()
{
if(t==1)
{
document.getElementById("sec-nav").style.left="-400px";
document.getElementById("sec-nav").style.width="100px";
document.getElementById("test").style.left="0px";
t=0;
}
else
{
document.getElementById("sec-nav").style.left="0px";
document.getElementById("sec-nav").style.width="100%";
document.getElementById("test").style.left="310px";
t=1;
}
}
</script>
  </head>
<body>
<div class="greenBorder" style="display: table;width:100%">
<div style="display: table-cell; vertical-align: middle;text-align:center;width:10%;height:50px;color:#000;background: url(bl.PNG)no-repeat" onclick="sd()"></div>
 <div style="display: table-cell; vertical-align: middle;text-align:center;width:90%;height:50px;color:#000;background: url(tb-sprite-bg.png) repeat-x 0px -50px">Heading 1</div></div>
<div id="main">
<header id="test">
<nav>
             <ul>
                <li>
                   <a href="http://www.technobuffalo.com">News</a>
                 </li>
                 <li>
                   <a href="http://www.technobuffalo.com">Reviews</a>
                 </li>
                 <li>
                   <a href="http://www.technobuffalo.com">Videos</a>
                 </li>
              </ul>
</nav>
</header>
<div id="sec-nav" class="sec-nav1" style="position:fixed">
  <ul style="margin: 0px;padding: 0px;list-style:none;text-decoration:none;">
            <div class="greenBorder" style="display: table;width:100%"> <div style="display: table-cell; vertical-align: middle;text-align:center;width:100%;height:50px;color:#000;background: url(tb-sprite-bg.png) repeat-x 0px -50px">Categories</div></div>
                <li style="text-align:center;font-weight: bold;height: 44px;background: url(tb-sprite-bg.png) repeat-x 0px -195px;">
                   <a href="http://www.technobuffalo.com" style="text-decoration:none;color: #606060;padding: 10px 0px 15px 0px;display: block;">News</a>
                 </li>
                 <li style="text-align:center;font-weight: bold;height: 44px;background: url(tb-sprite-bg.png) repeat-x 0px -195px;">
                   <a href="http://www.technobuffalo.com" style="text-decoration:none;color: #606060;padding: 10px 0px 15px 0px;display: block;">Reviews</a>
                 </li>
                 <li style="text-align:center;font-weight: bold;height: 44px;background: url(tb-sprite-bg.png) repeat-x 0px -195px;">
                   <a href="http://www.technobuffalo.com" style="text-decoration:none;color: #606060;padding: 10px 0px 15px 0px;display: block;">Videos</a>
                 </li>
              </ul>
</div>
</div>
</body>
</html>